<template>
  <div>
    <el-table :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" border v-loading="loading" :data="items" stripe style="width: 100%">
      <el-table-column label="产品名称" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="地址" min-width="200">
        <template slot-scope="scope">
          {{ scope.row.province_name }} {{ scope.row.city_name }}
          {{ scope.row.county_name }}{{scope.row.install_address}}
        </template>
      </el-table-column>
      <el-table-column prop="product_number" min-width="200" label="产品编号" />
      <el-table-column prop="create_time_format" min-width="200" label="创建时间" />
      <el-table-column label="操作" min-width="150" fixed="right">
        <template slot-scope="scope">
          <div class="flex" style="display: flex">
            <el-button type="primary" plain size="mini"  class="px-1" @click="openEdit(scope.row)" v-if="permission.includes('sys:product:edit')">编辑</el-button>
            <el-button size="mini" @click="removeProduct(scope.row.id)" v-if="permission.includes('sys:product:delete')">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <ProductForm ref="productFormRef" @reload="loadData"/>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import ProductForm from "@/views/product/product/compenents/product-form.vue";
export default {
  name: "Product",
  components:{
    ProductForm
  },
  props: {
    customerInfo:{
      type:Object,
    },
    id: {
      type: Number,
      default: 0
    }
  },
  computed: {
    ...mapGetters(["permission"])
  },

  data() {
    return {
      loading: false,
      items: []
    };
  },

  mounted() {
    this.loadData();
  },

  methods: {
    openEdit(row) {
      const newRow = Object.assign({},row,{
        customer:{
          name:this.customerInfo.name
        }
      })
      this.$refs.productFormRef.showDialog(row ? "edit" : "add", newRow,true);
      this.$forceUpdate()
    },

    loadData() {
      this.loading = true;
      this.$http.get(`customers/${this.id}/products`).then((res) => {
        this.items = res.data.data;
        this.loading = false;
      });
    },

    removeProduct(id) {
      this.$confirm("确定删除该产品吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http.delete(`products/${id}`).then((res) => {
          this.$message.success(res.data.msg);
          this.loadData();
        });
      });
    }
  }
};
</script>
